/*
 * @Author: Zhang Kai
 * @Date: 2022-03-30 14:18:26
 * @LastEditors: mayijun
 * @LastEditTime: 2022-08-09 18:30:49
 * @FilePath: /metricsx-standard-ui/src/components/CustomColumn/index.tsx
 */
import {
  defineComponent,
  onMounted,
  PropType,
  ref,
  TransitionGroup,
  watch
} from 'vue';
import { Popover } from "@arco-design/web-vue";
import '@/arco-components/arcoCustomColumn/index.scss';
import { VueDraggableNext } from 'vue-draggable-next';
import _ from 'lodash';
import drag from '@/assets/images/drag.svg';
import sequence from '@/assets/images/sequence.svg';
const ArcoCustomColumn = defineComponent({
  name: 'Pagination',
  components: {
    draggable: VueDraggableNext
  },
  props: {
    tableColumn: {
      type: Array,
      default: () => []
    }
  },
  emits: ['confirm'],
  setup: (props, { slots, attrs, emit }) => {
    const checkAll = ref(false);

    const isIndeterminate: any = ref();

    const checkedCities: any = ref([]);

    const popoverVisible: any = ref(false);

    const tableColumns: any = ref([]);

    onMounted(() => {});

    watch(
      () => popoverVisible.value,
      () => {
        tableColumns.value = _.cloneDeep(props?.tableColumn);
        checkedCities.value = tableColumns.value.filter((i:any)=>i.isCheck).
        map((i:any) => String(i.keys));
        if (checkedCities.value.length) isIndeterminate.value = true;
      }
    );
    return () => {
      const { tableColumn } = props;
      return (
        <div class="CustomColumn">
          <Popover
            v-model:popup-visible={popoverVisible.value}
            position="bl"
            content-class="CustomColumn-popover"
            style={{width: '240px'}}
            trigger="click"
            v-slots={{
              content: () => (
                <>
                  <div class="CustomColumn-list">
                    {/* 全选 */}
                    <a-checkbox
                      v-model={checkAll.value}
                      indeterminate={isIndeterminate.value}
                      class="allCheck"
                      onChange={(val: boolean) => {
                        tableColumns.value.forEach((v: any) => {
                          if (!v.disabled) v.isCheck = !!val;
                        });
                        checkedCities.value = tableColumns.value.filter(
                          (v: any) => v.isCheck
                        ).map((i:any) => String(i.keys));
                        isIndeterminate.value = false;
                      }}
                    >
                      全选
                    </a-checkbox>
                    <a-checkbox-group
                      onChange={(val: any) => {
                        const checkedCount = val.length;
                        isIndeterminate.value =
                          checkedCount > 0 &&
                          checkedCount < tableColumns.value.length;
                      }}
                      v-model={checkedCities.value}
                    >
                      {/* 拖拽list */}
                      <draggable
                        class="draggable-container"
                        list={tableColumns.value}
                      >
                        {tableColumns.value?.map((v: any, i: number) => (
                          
                          <div class="draggable-list">
                            <a-checkbox
                              value={String(v.keys)}
                              disabled={v.disabled}
                              label={v}
                            >
                              {v.label}
                            </a-checkbox>
                            <img src={drag} alt="" />
                          </div>
                        ))}
                      </draggable>
                    </a-checkbox-group>
                    <div class="CustomColumn-footer">
                      <a-button onClick={() => (popoverVisible.value = false)}>
                        取消
                      </a-button>
                      <a-button
                        type="primary"
                        class="ml-12"
                        onClick={() => {
                          popoverVisible.value = false;
                          {
                            tableColumns.value?.map((v:any) => {
                              if (checkedCities.value.includes(String(v.keys))) {
                                v.isCheck = true
                              } else {
                                v.isCheck = false
                              }
                              return {
                                ...v
                              }
                            })
                          }
                          emit('confirm', tableColumns.value);
                        }}
                      >
                        确认
                      </a-button>
                    </div>
                  </div>
                </>
              )
            }}
          >
            <div class="CustomColumn-button">
                    <a-button
                      type="text"
                    >
                      <img src={sequence} alt="" />
                      <span>自定义列</span>
                    </a-button>
                  </div>
          </Popover>
        </div>
      );
    };
  }
});

export default ArcoCustomColumn;
